<template>
    <div class="card-box">
        <h1 class="mb20">* 为了数据安全，请保护好您的微信公众号信息，不要随便泄露给他人。</h1>
        <el-button type="primary" @click="dialogVisible = true" class="mb20">微信设置</el-button>
        <el-dialog title="微信设置" :visible.sync="dialogVisible" width="40%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <el-form-item label="应用ID：" prop="id">
                    <el-input v-model="ruleForm.id" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="应用密钥：" prop="miyao">
                    <el-input v-model="ruleForm.miyao" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="商户号：" prop="shanghu">
                    <el-input v-model="ruleForm.shanghu" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="支付密钥：" prop="zhimiyao">
                    <el-input v-model="ruleForm.zhimiyao" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="selectCarrier">确认</el-button>
            </span>
        </el-dialog>
        <el-row>
            <el-col :span="2">
                应用ID：
            </el-col>
            <el-col :span="22">
                wx74cf3814732779bf
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                应用密钥：
            </el-col>
            <el-col :span="22">
                5b4a4da76ceb77218ada20084a02175a
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                商户号：
            </el-col>
            <el-col :span="22">
                1262976001
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                支付密钥：
            </el-col>
            <el-col :span="22">
                1262976001
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dialogVisible: false,
                ruleForm: {
                    id: '',
                    miyao: '',
                    shanghu: '',
                    zhimiyao: ''
                },
                rules: {
                    id: [
                        { required: true, message: '请输入应用ID', trigger: 'blur' }
                    ],
                    miyao: [
                        { required: true, message: '请输入应用密钥', trigger: 'blur' }
                    ],
                    shanghu: [
                        { required: true, message: '请输入商户号', trigger: 'blur' }
                    ],
                    zhimiyao: [
                        { required: true, message: '请输入支付密钥', trigger: 'blur' }
                    ]
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-row {
            .el-col {
                font-size: 14px;
                padding: 15px 0px;
            }
            .el-col:nth-of-type(2n + 1) {
                font-weight: bold;
                text-align: right;
            }
            .el-col:nth-of-type(2n) {
                padding-left: 15px;
            }
        }
</style>